<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="portalForAppTemplate"/>
    <g:set var="entityName" value="${message(code: 'attachments.label', default: 'Attachments')}"/>
    <title>上传材料</title>
    <style>
    /*图片上传*/
    .file-title {
        font-size: 1.2rem;
        height: 3.5rem;
        line-height: 3.5rem;
        background-color: #e1e1e1;
    }

    .file-title .status {
        color: #CD001A;
    }
    .title-desc {
        padding: 0 15px;
    }

    .preview {
        height: 77px;
        width: 77px;
    }

     .weui_uploader_input_wrp {
        margin-bottom: 0;
    }
    .weui_uploader_input_wrp:after, .weui_uploader_input_wrp:before {
        z-index: -1;
    }

    .file-input {
        position: relative;
        float: left;
    }
    .btn-file {
        width: 80%;
    }
    .krajee-default.file-preview-frame {
        padding: 0;
        margin: 0;
        border: none;
    }
    .kv-upload-progress .progress,
    .btn-file .glyphicon-folder-open,
    .file-thumbnail-footer {
        display: none;
    }
    .krajee-default.file-preview-frame .kv-file-content {
        width: auto;
        height: auto;
        max-width: 130px;
        max-height: 130px;
    }
    .hidden-xs {
        display: none !important;
    }
    .file-preview-image {
        max-width:80%;
        max-height:80%;
    }
        #kvFileinputModal{
            display: none;
        }

    
    .borrowerDiv2{
        margin-left: 100px;
    }
    .file-preview-image{
        width: 76px!important;
        height: 76px!important;
        max-width: 76px!important;
        max-height: 76px!important;
    }
    .file-error-message ul{ 
        display: none;
    }
    .file-error-message button{
        display: none;
    }
    </style>
</head>

<body>
<nav class="nav">
    %{--<a href="javascript:void(0);" onclick="javascript:window.history.back();"><</a>--}%
    <g:link controller="portalForApp" action="show4" params="[id:this.opportunity?.id,contact:this.opportunity?.contact?.id,collateralId:this.collateralId]"><</g:link>
    上传材料
</nav>
<header class="create-header">
    <ul class="creat-flowList flex-box">
        <li data-id="01" class="flex1 active">
            <span></span>

            <h3>借款信息</h3>
        </li>
        <li data-id="02" class="flex1 active">
            <span></span>

            <h3>上传材料</h3>
        </li>
        <li data-id="03" class="flex1">
            <span></span>

            <h3>报单成功</h3>
        </li>
    </ul>
</header>
<div class="message-box">
    <div class="helpMsg hide"></div>
    <g:if test="${flash.message}">
        <div class="message" role="status">
            ${flash.message}
        </div>
    </g:if>

</div>

<div class="file-title">
    <div class="title-desc">
        请上传<span class="status">借款人</span>身份证正反面
    </div>
</div>

<div class="weui_cell">
    <input type="hidden" name="borrowerType" value="${com.next.AttachmentType.findByName("借款人身份证")?.id}" id="borrowerType">
    <div class="weui_uploader_input_wrp">
        <input type="file" name="file" id="borrower1" style="opacity: 0;height: 76px;width: 76px">
    </div>

    <div class="weui_uploader_input_wrp borrowerDiv2">
        <input type="file" name="file" id="borrower2" style="opacity: 0;height: 76px;width: 76px">
    </div>
</div>

<g:if test="${this.params?.spouseIdNumber}">
    <div class="hasSpouse">
        <div class="file-title">
            <div class="title-desc">
                请上传<span class="status">借款人配偶</span>身份证正反面
            </div>
        </div>

        <div class="weui_cell">
            <input type="hidden" name="borrowerSpouseType" value="${com.next.AttachmentType.findByName("借款人配偶身份证")?.id}" id="borrowerSpouseType">
            <div class="weui_uploader_input_wrp">
                <input type="file" name="file" id="borrowerSpouse1" style="opacity: 0;height: 76px;width: 76px">
            </div>
            <div class="weui_uploader_input_wrp">
                <input type="file" name="file" id="borrowerSpouse2" style="opacity: 0;height: 76px;width: 76px">
            </div>
        </div>
    </div>
</g:if>

<g:if test="${this.params?.mortgagorIdNumber}">
    <div class="hasMotgagor">
        <div class="file-title">
            <div class="title-desc">
                请上传<span class="status">抵押人</span>身份证正反面
            </div>
        </div>

        <div class="weui_cell">
            <input type="hidden" name="mortgagerType" value="${com.next.AttachmentType.findByName("抵押人身份证")?.id}" id="mortgagerType">
            <div class="weui_uploader_input_wrp">
                <input type="file" name="file" id="mortgager1" style="opacity: 0;height: 76px;width: 76px">
            </div>
            <div class="weui_uploader_input_wrp">
                <input type="file" name="file" id="mortgager2" style="opacity: 0;height: 76px;width: 76px">
            </div>
        </div>
    </div>
</g:if>

<g:if test="${this.params?.mortgagorSpouseIdNumber}">
    <div class="hasMortgagorSpouse">
        <div class="file-title">
            <div class="title-desc">
                请上传<span class="status">抵押人配偶</span>身份证正反面
            </div>
        </div>

        <div class="weui_cell">
            <input type="hidden" name="mortgagerSpouseType" value="${com.next.AttachmentType.findByName("抵押人配偶身份证")?.id}" id="mortgagerSpouseType">
            <div class="weui_uploader_input_wrp">
                <input type="file" name="file" id="mortgagerSpouse1" style="opacity: 0;height: 76px;width: 76px">
            </div>
            <div class="weui_uploader_input_wrp">
                <input type="file" name="file" id="mortgagerSpouse2" style="opacity: 0;height: 76px;width: 76px">
            </div>
        </div>
    </div>
</g:if>

<div class="file-title">
    <div class="title-desc">
        请上传<span class="status">房产证</span>
    </div>
</div>

<div class="weui_cell">
    <div class="weui_uploader_input_wrp">
        <input type="hidden" name="propertyType" value="${com.next.AttachmentType.findByName("房产证")?.id}" id="propertyType">
        <input type="file" name="file" id="propertyPicture" style="opacity: 0;height: 76px;width: 76px"  multiple>
    </div>
    <div class="propertyAlready">已上传<span style="color:#CD001A" id="propertyCounts">${propertyImgCount}</span>张房产证</div>
</div>
%{--</g:form>--}%

<g:form name="reportBillForm" action="update3">
    <input type="hidden" value="${this.opportunity.id}" name="opportunity.id" id="opportunity"/>
    <input type="hidden" value="${this.params.fullName}" name="fullName" id="fullName"/>
    <input type="hidden" value="${this.params.idNumberTemp}" name="idNumberTemp" id="idNumberTemp"/>
    <input type="hidden" value="${this.params.cellphone}" name="cellphone" id="cellphone"/>
    <input type="hidden" value="${this.params.maritalStatus}" name="maritalStatus" id="maritalStatus"/>
    <input type="hidden" value="${this.params.spouseFullName}" name="spouseFullName" id="spouseFullName"/>
    <input type="hidden" value="${this.params.spouseIdNumber}" name="spouseIdNumber" id="spouseIdNumber"/>
    <input type="hidden" value="${this.params.spouseCellphone}" name="spouseCellphone" id="spouseCellphone"/>
    <input type="hidden" value="${this.params.mortgagorFullName}" name="mortgagorFullName" id="mortgagorFullName"/>
    <input type="hidden" value="${this.params.mortgagorIdNumber}" name="mortgagorIdNumber" id="mortgagorIdNumber"/>
    <input type="hidden" value="${this.params.mortgagorCellphone}" name="mortgagorCellphone" id="mortgagorCellphone"/>
    <input type="hidden" value="${this.params.mortgagorMaritalStatus}" name="mortgagorMaritalStatus" id="mortgagorMaritalStatus"/>
    <input type="hidden" value="${this.params.mortgagorSpouseFullName}" name="mortgagorSpouseFullName" id="mortgagorSpouseFullName"/>
    <input type="hidden" value="${this.params.mortgagorSpouseIdNumber}" name="mortgagorSpouseIdNumber" id="mortgagorSpouseIdNumber"/>
    <input type="hidden" value="${this.params.mortgagorSpouseCellphone}" name="mortgagorSpouseCellphone" id="mortgagorSpouseCellphone"/>
    <input type="hidden" name="fileNames" id="fileNames" value=""/>
    <div class="bigBtn" style="margin-bottom: 20px">
        <input class="linkBtn weui_btn weui_btn_plain_default" value="下一步" id="reportBillBtn" type="button"/>
    </div>
</g:form>
<div>
    %{--借款人--}%
    <input type="hidden" id="marialFile" name="marialFile" value="" class="borrower1">
    <input type="hidden" id="maritalReverseFile" name="maritalReverseFile" value="" class="borrower2">
    %{--借款人配偶--}%
    <input type="hidden" id="spouseFile" name="spouseFile" value="" class="borrowerSpouse1">
    <input type="hidden" id="spouseReverseFile" name="spouseReverseFile" value="" class="borrowerSpouse2">
    %{--抵押人--}%
    <input type="hidden" id="mortgagorFile" name="mortgagorFile" value="" class="mortgager1">
    <input type="hidden" id="mortgagorReverseFile" name="mortgagorReverseFile" value="" class="mortgager2">
    %{--抵押人配偶--}%
    <input type="hidden" id="mortgagorSpouseFile" name="mortgagorSpouseFile" value="" class="mortgagerSpouse1">
    <input type="hidden" id="mortgagorSpouseReverseFile" name="mortgagorSpouseReverseFile" value="" class="mortgagerSpouse2">
    %{--房产证--}%
    <input type="hidden" id="properties" name="properties" value="" class="propertyPicture">
</div>

<asset:javascript src="homer/vendor/fileinput.js"></asset:javascript>
<asset:javascript src="homer/vendor/zh.js"></asset:javascript>
<asset:javascript src="homer/vendor/fileinput.css"></asset:javascript>
<script>

    $("#borrower1").click(function () {
        var borrowerType=$("#borrowerType").val()
        $(".borrower1").val("marialFile")
        uploadImg("borrower1",borrowerType)
    })
    $("#borrower2").click(function () {
        var borrowerType=$("#borrowerType").val()
        $(".borrower2").val("maritalReverseFile")
        uploadImg("borrower2",borrowerType)
    })
    $("#borrowerSpouse1").click(function () {
        var borrowerSpouseType=$("#borrowerSpouseType").val()
        $(".borrowerSpouse1").val("spouseFile")
        uploadImg("borrowerSpouse1",borrowerSpouseType)
    })
    $("#borrowerSpouse2").click(function () {
        var borrowerSpouseType=$("#borrowerSpouseType").val()
        $(".borrowerSpouse2").val("spouseReverseFile")
        uploadImg("borrowerSpouse2",borrowerSpouseType)
    })
    $("#mortgager1").click(function () {
        var mortgagerType=$("#mortgagerType").val()
        $(".mortgager1").val("mortgagorFile")
        uploadImg("mortgager1",mortgagerType)
    })
    $("#mortgager2").click(function () {
        var mortgagerType=$("#mortgagerType").val()
        $(".mortgager2").val("mortgagorReverseFile")
        uploadImg("mortgager2",mortgagerType)
    })
    $("#mortgagerSpouse1").click(function () {
        var mortgagerSpouseType=$("#mortgagerSpouseType").val()
        $(".mortgagerSpouse1").val("mortgagorSpouseFile")
        uploadImg("mortgagerSpouse1",mortgagerSpouseType)
    })
    $("#propertyPicture").click(function () {
        var propertyType=$("#propertyType").val()
        $(".propertyPicture").val("properties")
        uploadImg("propertyPicture",propertyType)
    })
    $("#mortgagerSpouse2").click(function () {
        var mortgagerSpouseType=$("#mortgagerSpouseType").val()
        $(".mortgagerSpouse2").val("mortgagorSpouseReverseFile")
        uploadImg("mortgagerSpouse2",mortgagerSpouseType)
    })

    function getUploadToken() {
        var token = ""
        $.ajax({
            type: "POST",
            url: "/attachments/getUploadToken1",
            async:false,
            success: function (data) {
                if (data.status == "success") {
                    token = data.token;
                    console.log("getUploadToken1 success");
                }
            },
        });
        return token
    }

    function getRandom(length)
    {
        var str = Math.random().toString(36).substr(2);
        if (str.length>=length) {
            return str.substr(0, length);
        }
        str += getRandom(length-str.length);
        return str;
    }

    function uploadImg(ownerType,type) {
        var opportunityId=$("#opportunity").val()
        console.log("ownerType: "+ownerType)
        $("#"+ownerType).fileinput({
            language: 'zh', //设置语言
            uploadUrl:"https://upload-z1.qiniup.com", //上传的地址
//            uploadUrl:"test",
            allowedPreviewTypes : ['image'],
            allowedFileTypes: ['image'],
            allowedFileExtensions: ['jpg','jpeg', 'gif', 'png'],//接收的文件后缀
            removeFromPreviewOnError:true,
            uploadAsync: false, //false同步,true 异步
            showUpload:false, //是否显示上传按钮
            showRemove :false, //显示移除按钮
            showPreview :true, //是否显示预览
            showCaption:false,//是否显示标题
            showCancel: false, //是否显示文件上传取消按钮
            showClose: false, //是否在预览中显示关闭图标
            browseClass:"", //按钮样式
            zoomIndicator: "",
            dropZoneEnabled: false,//是否显示拖拽区域
            maxFileSize:10240,//单位为kb，如果为0表示不限制文件大小
            maxFileCount:1, //表示允许同时上传的最大文件个数
            autoReplace: true, //达到限制后是否自动替换预览中的文件
            enctype:'multipart/form-data',
            validateInitialCount:true,
            textEncoding:'UTF-8',
            previewFileIcon: "<i class='glyphicon glyphicon-remove'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            uploadExtraData: function() {   //额外参数的关键点
                var files=$("#"+ownerType).val()
//                console.log("uploadExtraData files: "+files)
                var key=getRandom(28) + files.substr(files.lastIndexOf('.'))
                var description=(files.substr(files.lastIndexOf('\\'))).split('\\')[1]
                var token=getUploadToken()
                var parameter ={
                    "x:opportunityId":opportunityId,
                    "x:type":type,
                    "x:description":description,
                    "key":key,
                    "token":token
                }
//                console.log("parameter:  "+JSON.stringify(parameter))
                return parameter;
            },
        }).on("filebatchselected", function () {
            console.log("***filebatchselected***")
            $("#"+ownerType).fileinput('upload');
        }).on('filebatchuploaderror', function(event, data, msg) {
            console.log("filebatchuploaderror")
            alert("上传图片失败，请重新上传")
        }).on("filebatchuploadsuccess",function(event, data, previewId, index) {
            //批量上传成功后，给第一张图片添加封面
            console.log("filebatchuploadsuccess")
            var result=data.response.files[0]
            console.log("result: "+JSON.stringify(result))
            if(result.status=='200'){
                var url=result.thumbnailUrl
                var type=result.type
                var name=result.name
                var fileNames=$("#fileNames").val()
                $("#fileNames").val(fileNames+","+url+"&"+name+"&"+type)
                console.log("fileName.val:  "+$("#fileNames").val())
            }else{
//                $("."+ownerType).val("")
                var url=result.thumbnailUrl
                var type=result.type
                var name=result.name
                var fileNames=$("#fileNames").val()
                $("#fileNames").val(fileNames+","+url+"&"+name+"&"+type)
                console.log("fileName.val:  "+$("#fileNames").val())
                console.log(""+result.errorMessage)
            }
        })
    }

</script>
<script>

    $(function () {
        $("#reportBillBtn").click(function () {
            var n=true
            var marialFile = $(".borrower1").val();
            var maritalReverseFile = $(".borrower2").val();

            if (!marialFile) {
                n=false
                helpMessage("请上传借款人身份证正面");
                return;
            }

            if (!maritalReverseFile) {
                n=false
                helpMessage("请上传贷款人身份证反面");
                return;
            }

            if ($(".hasSpouse").css("display") == "block") {
                var spouseFile = $(".borrowerSpouse1").val();
                var spouseReverseFile = $(".borrowerSpouse2").val();
                if (!spouseFile) {
                    n=false
                    helpMessage("请上传借款人配偶身份证正面");
                    return;
                }
                if (!spouseReverseFile) {
                    n=false
                    helpMessage("请上传借款人配偶身份证反面");
                    return;
                }

            }
            if ($(".hasMotgagor").css("display") == "block") {
                var mortgagorFile = $(".mortgager1").val();
                var mortgagorReverseFile = $(".mortgager2").val();
                if (!mortgagorFile) {
                    n=false
                    helpMessage("请上传抵押人身份证正面");
                    return;
                }

                if (!mortgagorReverseFile) {
                    n=false
                    helpMessage("请上传抵押人身份证反面");
                    return;
                }

            }
            if ($(".hasMortgagorSpouse").css("display") == "block") {
                var mortgagorSpouseFile = $(".mortgagerSpouse1").val();
                var mortgagorSpouseReverseFile = $(".mortgagerSpouse2").val();
                if (!mortgagorSpouseFile) {
                    n=false
                    helpMessage("请上传抵押人配偶身份证正面");
                    return;
                }

                if (!mortgagorSpouseReverseFile) {
                    n=false
                    helpMessage("请上传抵押人配偶身份证反面");
                    return;
                }
            }

            var properties = $(".propertyPicture").val();
            if (!properties) {
                n=false
                helpMessage("请上传房产证");
                return;
            }

            if(n){
                $("#reportBillForm").removeClass("btn_disabled")
                $("#reportBillForm").submit();
            }else{
                $('#reportBillBtn').addClass("btn_disabled").attr('disabled', 'disabled');
            }

//            $("#reportBillForm").submit();
//            $.ajax({
//                type: "POST",
//                url:  "/wechatOpportunity/GetImgServerId2",
//                data: {
//                    marialFile: marialFile,
//                    maritalReverseFile: maritalReverseFile,
//                    spouseFile: spouseFile,
//                    spouseReverseFile: spouseReverseFile,
//                    mortgagorFile: mortgagorFile,
//                    mortgagorReverseFile: mortgagorReverseFile,
//                    mortgagorSpouseFile: mortgagorSpouseFile,
//                    mortgagorSpouseReverseFile: mortgagorSpouseReverseFile,
//                    properties: properties,
//                    accessToken: accessToken
//                },
//                beforeSend:function() {
//                    $(".helpMsg").text("正在上传报单信息，请稍候").fadeIn(200);
//                },
//                success: function (data) {
//                    if (data.status == "success") {
//                        var fileNames = data.fileNameList
//                        $("#fileNames").val(fileNames);
//                        $("#reportBillForm").submit();
//                    } else {
//                        helpMessage(data.errorMsg);
//                        return;
//                    }
//                }
//            });
        });

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }
    });
</script>
</body>
</html>
